<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.util.List" %>
<%@ page import="org.com.suit.domain.Writing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath }/common/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath }/common/css/bootstrap-theme.min.css" >
<script src="${pageContext.request.contextPath }/common/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath }/common/js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">

function addBox(elem, idx){
	$("#username").eq(idx).attr("onclick", "disabled=false");
	$(function(){
		
		var output = "";
		output += "<div class="+'repl-box'+"><div><textarea class="+'form-control'+" rows="+'2'+"></textarea></div>"
			     +"<div><input type="+'button'+" value="+'SEND'+">"
			     +"<input type="+'button'+" value="+'CLOSE'+" onclick="+'moveOut(this,'+idx+')'+"></div></div>";
		$(".media").eq(idx).append(output);
		
		});
	};
function moveOut(elem, idx){
	$("#username").attr("onclick", "addBox(this, "+idx+")");
	$(".repl-box").empty();
		
};

</script>

<title>Home</title>
</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
  <div class="container-fluid">
	<ul class="nav navbar-nav">
		<li class="active"><a href="${pageContext.request.contextPath }/readWritingLists.do">Home</a></li>
		<li class="active"><a href="${pageContext.request.contextPath }/allUserList.do">Member</a></li>
		<li><a href="#">Community</a></li>
		<li class="">
	</ul>
	 <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="button" class="btn btn-default">Submit</button>
      </form>
		<div class="navbar-right" style="padding-top: 10px;"><font color="white">${myInfo.name }様</font>&nbsp;&nbsp;
			<a href="logOut.do"><input type="button" class="btn btn-xs btn-default" name="log_out" value="log out"></a>
			<a href="myInfo.do?name=${myInfo.name}"><input type="button" class="btn btn-xs btn-default" name="my_info" value="my info"></a>
		</div>
  </div><!-- container -->
</nav><!-- navbar -->
<div class="container">
 <div class="container-fluid col-md-5">
	 <div class="jumbotron col-sm-offset-1">
        <h1>Hello ${myInfo.name }</h1>
        <p>This is a Test Website</p>
     </div>
 	<form class="form-horizontal" role="form" action="sendMessage.do" method="post">
 		<input type="hidden" name="no" value="${myInfo.no }">
 		<input type="hidden" name="name" value="${myInfo.name }">
 		<div class="col-sm-offset-1" style="margin-top: -20px;">
			<textarea rows="3" cols="44" name="content" placeholder="leave a message..."></textarea>
		</div>
		<div class="col-sm-offset-10" style="margin-top: 5px;">
			<input type="submit" class="btn btn-info btn-sm" value="SEND">
		</div>
	</form>
</div>
     
<div class="container col-md-6">
     <% List<Writing> list = (List<Writing>)request.getAttribute("writingLists");
     for(int i=0; i<list.size(); i++){ %>
     <div class="panel panel-success">
     	<div class="media">
			<div class="media-body">
				<p><input type="hidden" name="seq" value="<%= list.get(i).getSeq() %>"></p>
				<p id="username" onclick="addBox(this, <%= i %>)"><span style="color: blue;font-weight: bold">@<%= list.get(i).getName() %></span>
									&nbsp;&nbsp;&nbsp;&nbsp;<span style="color: grey"><%= list.get(i).getRegdate() %></span></p>
				<p><%= list.get(i).getContent() %></p>
			</div>
	 	</div>
	 </div>
    <% } %>
</div>
 </div><!------------ container --------------->
</body>
</html>